<template>
  <div>
    <h2>欢迎使用我们的平台</h2>
    <p>这里是首页内容区域...</p>

    <div class="card-grid">
      <div v-for="n in 6" :key="n" class="card">
        <h3>卡片 {{ n }}</h3>
        <p>示例内容描述...</p>
      </div>
    </div>
  </div>
</template>

<script setup>
</script>

<style scoped>
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.card {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 20px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
</style>